<template>
  <div>
    <!-- 操作区 -->
    <div class="button-group">
      <button @click="generateDocx">生成文档并预览</button>
      <button @click="downloadDocx" :disabled="!generatedDocxBlob">下载Word文档</button>
      <button @click="exportToPdf" :disabled="!generatedDocxBlob">导出为PDF</button>
    </div>
<vue-esign
      ref="esign"
      :width="800"
      :height="300"
      :isCrop="isCrop"
      :lineWidth="lineWidth"
      :lineColor="lineColor"
      :bgColor.sync="bgColor"
    />
    <button @click="handleReset">清空画板</button>
    <button @click="handleGenerate">生成图片</button>
    <!-- 预览区 -->
    <div class="preview-container" v-if="showPreview">
      <h3>文档预览:</h3>
      <vue-office-docx 
        :src="generatedDocxBlob" 
        @rendered="onRendered"
        @error="onPreviewError"
        style="height: 80vh; border: 1px solid #ccc;"
      />
      <!-- <iframe src="./04作业机井架无损检测报告.pdf" frameborder="0"></iframe> -->
    </div>
  </div>
</template>

<script>
import Docxtemplater from 'docxtemplater';
import PizZip from 'pizzip';
import { saveAs } from 'file-saver';
import ImageModule from 'docxtemplater-image-module-free';
import expressions from "angular-expressions";
import VueOfficeDocx from '@vue-office/docx';
import '@vue-office/docx/lib/index.css';
import vueEsign from 'vue-personalized-signature'
// 引入图片处理工具函数（参考[citation:4]）
import { getBase64Sync, base64DataURLToArrayBuffer } from '@/utils/imageUtils';

export default {
  name: 'DocxPreviewPdfExport',
  components: {
    VueOfficeDocx,
    vueEsign
  },
  data() {
    return {
         lineWidth: 6,        // 画笔粗细
      lineColor: '#000000', // 画笔颜色
      bgColor: '',          // 画布背景色，空为透明
      resultImg: '',        // 生成图片的Base64地址
      isCrop: false   ,
      generatedDocxBlob: null,
      showPreview: false,
      // 示例数据，实际可从API获取
      templateData: {
        name: '张三',
        company: {name:44},
        date: '2023-10-29',
        // 图片数据需要是base64格式或可转换为base64的URL
        image: './m1.jpg',
        arr :[{bb:['./m1.jpg','./m1.jpg']}]
      }
    };
  },
  methods: {
     handleReset() {
      this.$refs.esign.reset();
    },
    // 生成图片
    handleGenerate() {
      this.$refs.esign.generate()
        .then(res => {
          // res是生成图片的Base64字符串
          this.resultImg = res;
          // 这里可以执行上传等后续操作
          console.log('签名图片：', res);
        })
        .catch(err => {
          // 当画布为空时，会抛出错误
          alert('请先完成签名！');
        });
    },
    async generateDocx() {
      try {
        // 1. 获取模板文件
        const templatePath = '/template.docx';
        const response = await fetch(templatePath);
        const arrayBuffer = await response.arrayBuffer();
        
        // 2. 处理图片数据（如果是URL需要转换为base64）
        if (this.templateData.image && !this.templateData.image.startsWith('data:')) {
          // this.templateData.image = await getBase64Sync(this.templateData.image);
           this.templateData.arr[0].bb[0]=await getBase64Sync(this.templateData.image);
          //  this.templateData.arr[0].bb[1]=await getBase64Sync(this.templateData.arr[0].bb[1]);
          console.log(this.templateData,5555);
        }
        
        // 3. 初始化docxtemplater并配置图片模块
        const zip = new PizZip(arrayBuffer);
        const doc = new Docxtemplater().loadZip(zip);
        
        // 配置图片模块选项[citation:4]
        const imageModuleOptions = {
          centered: false,
          getImage: (tagValue) => {
            return base64DataURLToArrayBuffer(tagValue);
          },
          getSize: (img, tagValue, tagName) => {
            // 可针对不同图片设置不同尺寸
            return [500, 300]; // [宽度, 高度]
          }
        };
        
        console.log(9999,this.templateData);
        doc.attachModule(new ImageModule(imageModuleOptions));
        
        // 4. 设置解析器以支持复杂表达式[citation:1]
        doc.setOptions({
          parser: (tag) => {
            const expr = expressions.compile(tag);
            return {
              get: (scope) => expr(scope)
            };
          }
        });
        
        // 5. 设置数据并渲染
        doc.setData(this.templateData);
        doc.render();
        
        // 6. 生成Blob并预览
        this.generatedDocxBlob = doc.getZip().generate({
          type: 'blob',
          mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        });
        
        this.showPreview = true;
        console.log('文档生成成功，已准备好预览。');
        
      } catch (error) {
        console.error('生成文档时出错:', error);
      }
    },

    downloadDocx() {
      if (this.generatedDocxBlob) {
        saveAs(this.generatedDocxBlob, `生成的文档_${new Date().getTime()}.docx`);
      }
    },

    async exportToPdf() {
      if (!this.generatedDocxBlob) return;
      
      try {
        // 方案一：调用后端服务转换（推荐，需自行实现）
        // await this.convertViaBackend(this.generatedDocxBlob);
        
        // 方案二：前端转换（简单文档可用）
        // await this.convertViaFrontend();
      } catch (error) {
        console.error('PDF导出失败:', error);
      }
    },

    // 前端PDF转换方案（基于[citation:10]的思路）
    // async convertViaFrontend() {
    //   const pdf = new jsPDF('p', 'mm', 'a4');
    //   const element = document.querySelector('.preview-container');
      
    //   // 使用html2canvas将预览内容转换为图片
    //   const canvas = await html2canvas(element, {
    //     scale: 2, // 提高分辨率
    //     useCORS: true,
    //     logging: false
    //   });
      
    //   const imgData = canvas.toDataURL('image/jpeg', 1.0);
    //   const imgWidth = pdf.internal.pageSize.getWidth();
    //   const imgHeight = (canvas.height * imgWidth) / canvas.width;
      
    //   pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight);
    //   pdf.save(`导出文档_${new Date().getTime()}.pdf`);
    // },

    // 后端PDF转换方案（推荐用于生产环境）
    // async convertViaBackend(wordBlob) {
    //   const formData = new FormData();
    //   formData.append('file', wordBlob, 'document.docx');
      
    //   try {
    //     const response = await fetch('/api/convert-docx-to-pdf', {
    //       method: 'POST',
    //       body: formData
    //     });
        
    //     if (!response.ok) throw new Error('转换失败');
    //     const pdfBlob = await response.blob();
    //     saveAs(pdfBlob, `converted_document_${new Date().getTime()}.pdf`);
    //   } catch (error) {
    //     console.error('通过后端转换PDF失败:', error);
    //     // 降级到前端方案
    //     await this.convertViaFrontend();
    //   }
    // },

    onRendered() {
      console.log('文档预览渲染完成。');
    },

    onPreviewError(error) {
      console.error('文档预览渲染失败:', error);
    }
  }
}
</script>

<style scoped>
.button-group {
  margin-bottom: 20px;
}
.button-group button {
  margin-right: 10px;
  padding: 8px 16px;
  cursor: pointer;
}
.preview-container {
  margin-top: 20px;
}
</style>